<template>
    <el-col :span="8">
        <br>
        <br>
        <br>
        <br>
        <el-form ref="registForm" :rules="registRules" :model="registForm" label-width="95px">
            <el-form-item label="服务器 : " prop="ip">
                <el-input v-model="registForm.ip" placeholder="服务器连接地址"></el-input>
            </el-form-item>
            <el-form-item label="账户 : " prop="username">
                <el-input v-model="registForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码 : " prop="password">
                <el-input v-model="registForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码 : " prop="confirm">
                <el-input v-model="registForm.confirm" show-password placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item label="昵称 : " prop="nickname">
                <el-input v-model="registForm.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="性别 : " prop="gender">
                <el-radio v-model="registForm.gender" label="1">男</el-radio>
                <el-radio v-model="registForm.gender" label="0">女</el-radio>
                <span class="registList" @click="changeStatus('login')">登录</span>
            </el-form-item>
            <el-form-item label="">
                <el-button-group>
                    <el-button type="primary" @click="submit" style="width:100%;">注 册</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
    </el-col>
</template>
<script>
export default {
    props: ['changeStatus'],
    data() {
        return {
            registRules: {
                ip: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
                confirm: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
            },
            registForm: {
                ip: '',
                username: '',
                password: '',
                confirm: '',
                gender: '1',
                nickname: '',
            },
        }
    },
    methods: {
        submit() {
            this.$refs.registForm.validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>
<style scoped>
    .el-button-group { display: block;}
    .registList { color: #198cff; float: right; cursor: pointer;}
</style>